<template>
  <view class="w-f h-100 tabbar f jc-s-b ai-c">
    <view v-for="(item, index) in list" :key="index" class="f fd-c tabbar-box ai-c" @click="toTab(item)">
      <image :src="tab == index ? item.selectedIconPath : item.iconPath" class="w-44 h-44"></image>
      <view class="fs-20 text-color3 mt-8" :style="{ color: tab == index ? '#fabb3c' : '' }">{{ item.text }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { ref } from 'vue';
import index from '@/static/tabbar/index.png';
import indexSelect from '@/static/tabbar/index-select.png';
import message from '@/static/tabbar/message.png';
import messageSelect from '@/static/tabbar/message-select.png';
import wode from '@/static/tabbar/wode.png';
import wodeselect from '@/static/tabbar/wode-select.png';
const props = defineProps({
    tab: {
        type: Number,
        default: 0,
    },
    indexRoll: {
        type: Boolean,
        default: false,
    },
});
const list = ref([
    {
        pagePath: '/pages/index/index',
        text: '首页',
        iconPath: index,
        selectedIconPath: indexSelect,
    },
    {
        pagePath: '/pages/message/index',
        text: '消息',
        iconPath: message,
        selectedIconPath: messageSelect,
    },
    {
        pagePath: '/pages/mine/index',
        text: '我的',
        iconPath: wode,
        selectedIconPath: wodeselect,
    },
]);
const toTab = (item) => {
    uni.switchTab({
        url: item.pagePath,
    });
};
</script>
<style lang="scss" scoped>
.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    .tabbar-box {
        width: 33.33%;
    }
}
</style>
